<template>
  <div class="main">
    <div class="body">
      <div class="inp">
        <div class="headinp">

        </div>

        <div class="rigthbtn">
          <el-button
            type="primary"
            class="add"
            icon="el-icon-edit"
            size="small"
            @click="addDialog = true"
            >添加菜单</el-button
          >
        </div>
      </div>
      <div>

  <el-table
    :data="tableData"
    style="width: 100%;margin-bottom: 20px;"
    row-key="id"
    default-expand-all
    :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
    <el-table-column
      prop="title"
      label="标题"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="code"
      label="权限点代码"
      sortable
      width="850">
    </el-table-column>
          <el-table-column prop="avatar" label="操作">
            <template #default="{ row }">
              <el-button type="primary" icon="el-icon-edit" circle @click="changeDialogs(row)"></el-button>
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delTableData(row.id)"
              ></el-button>
            </template>
          </el-table-column>
  </el-table>
</div>
      <div class="pagination">
        <el-pagination
          background
          layout="prev,pager,next,sizes,jumper"
          :total="total"
          :page-sizes="[10, 20, 50, 100]"
          :page-size="data.pageSize"
          @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
      <!-- 新增用户弹窗 -->
      <div>
    <el-dialog
        title="创建用户"
        :visible.sync="addDialog"
        width="50%"
      >
      <span slot="footer" class="dialog-footer">
      <div class="form">
            <el-form :rules="rules" :model="form" ref="form" label-width="100px">
              <el-form-item label="权限点名称" prop="username">
                  <el-radio v-model="radio" label="1">菜单</el-radio>
  <el-radio v-model="radio" label="2">权限点</el-radio>
              </el-form-item>
              <el-form-item label="权限组名称" >
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="权限代码：" prop="username">
                <el-input placeholder="请输入用户名" v-model="form.username" />
              </el-form-item>
              <el-form-item label="权限代码：" prop="emal">
                <el-input
                  placeholder="请输入邮箱："
                  v-model="form.email"
                  type="emal"
                />
              </el-form-item>
            </el-form>
            <div class="button">
              <el-button @click="addDialog = false">取 消</el-button>
              <el-button type="primary" @click="addUser">确 定</el-button>
            </div>
          </div>
      </span>
      </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
import { getMenu } from '@/api/hmmm/menu.js'
import { transListToTreeData } from '@/utils/index.js'

export default {
  components: {

  },
  data () {
    return {
      tableData: [

      ],
      list: [],
      data: {
      },
      input: '',
      total: 0,
      counts: '',
      addDialog: false,
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }

        ],
        emal: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      },
      form: {
        username: '',
        password: '',
        emal: '',
        role: '',
        phone: ''
      },
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: '',
      radio: '2'
    }
  },

  async created () {
    this.init()
  },

  methods: {
    async init () {
      const { data } = await getMenu()
      console.log(data)

      this.tableData = data

      console.log(transListToTreeData(data))
      // const arrIndexChilds = this.tableData.findIndex(item => item.childs)
      // this.tableData[arrIndexChilds].children = this.tableData[arrIndexChilds].childs
      // const arrIndexPoints = this.tableData.findIndex(item => item.points)
      // this.tableData[arrIndexPoints].children = this.tableData[arrIndexPoints].points
      // function fn (data) {
      //   const arrindex = data.findIndex(item => item.childs)
      //   data[arrindex].children = data[arrindex].childs
      //   fn()
      // }
      // fn(this.tableData)
    },
    async addUser () {
      this.addDialog = false
      // const data = await addUser(this.info)
      // console.log(data)
      this.init()
    },
    reset () {
      this.input = ''
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    async delTableData (id) {
      // const data = await delUser(id)
      // console.log(data)
      this.init()
    },
    search () {
      this.tableData = []
      console.log(this.tableData)
      this.list.forEach(item => {
        if (item.username.includes(this.input)) {
          console.log(item)
          this.tableData.push(item)
        }
      })
      console.log(this.tableData)
    },
    handleSizeChange (val) {
      console.log(val)
      this.data.pagesize = val
      this.init()
    },
    handleCurrentChange (val) {
      console.log(val)
      this.data.page = val
      this.init()
    },
    async isChangeDialogs () {
      // const data = await modifyUser(this.modifyinfo.id, this.modifyinfo)
      // console.log(data)
      this.changeDialog = false
      this.init()
    }

  }
}
</script>

<style scoped lang="less">

::v-deep .el-form-item__content{
    text-align:left !important;
  }
.button {
  margin-top: 30px;
  text-align: center;
}
::v-deep .el-input--suffix .el-input__inner {
  padding-right: 86px;
}
::v-deep .el-dialog__body {
  display: none !important;
}
.form {
  width: 350px;
  // margin-top: 30px;
  margin: 30px auto;
}
::v-deep .el-table th.el-table__cell {
  background-color: #fafafa;
}
// ::v-deep td.operation {
//   // text-align: center !important;
// }

::v-deep th {
  // text-align: center !important;
  background-color: #fafafa;
  border-bottom: 1px solid #ebeef5;
}
::v-deep .el-input--medium .el-input__inner {
  height: 32px;
}
::v-deep .add.el-button.el-button--primary.el-button--small {
  background-color: #67c23a;
  border-color: #67c23a;
}
.headinp {
  flex: 1;
  display: flex;
}
.main {
  padding: 20px;
  .body {
    // height: 100px;
    background-color: #fff;
    padding: 20px;
    .inp {
      // background-color: #ad1b1b;
      height: 40px;
      display: flex;
      .input {
        width: 200px;
        height: 32px;
      }
      .btn {
        margin-left: 15px;
      }
    }
    .record {
      height: 32px;
      background-color: #f4f4f5;
      margin: 10px 0;
      line-height: 32px;
      font-size: 13px;
      color: #909399;
    }
    .pagination {
      margin-top: 20px;
      text-align: right;
    }
  }
}
</style>
